<template>
	<view class="page">
		<uni-nav-bar @clickLeft="toback" backgroundColor="#ffffff" left-icon="back" title="" color="#15151B"
					:fixed="true" :statusBar="true" :border="false"></uni-nav-bar>
		<view class="nav-scroll">
			<view class="nav uni-nav">
				<view class="nav-item tab" :class="swiperIndex == 0 ? 'nav-item-act' : ''" @click="taggleNav(0)">靓号
				</view>
				<view class="nav-item tab" :class="swiperIndex == 1 ? 'nav-item-act' : ''" @click="taggleNav(1)">坐骑
				</view>
				<view class="nav-line" :style="style"></view>
			</view>
		</view>
		<view class="geban">隔板</view>
		<view class="swiper">
			<swiper :current="swiperIndex" :duration="300" class="swiper-1" easing-function="linear"
				@change="swiperChange" :style="{ height: swiperheight + 'px' }">
				<!-- @change="swiperChange" > -->
				<swiper-item>
					<propbeautiful></propbeautiful>
				</swiper-item>
				<swiper-item>
					<mount></mount>
				</swiper-item>

			</swiper>

		</view>

	</view>
</template>

<script>
	import propbeautiful from './propbeautiful.vue';
	import mount from './mount.vue';
	export default {
		components: {
			propbeautiful,
			mount,
		},
		data() {
			return {
				swiperIndex: 0, //当前的swiperindex
				navItemWidth: '', //选中下划线的宽度
				navItemLeft: 0, //选中下划线的显示位置
				scrollToLeft: 0, //scrollview需要滚动的距离
				navInfos: [], //所有navitem的节点信息
				parentLeft: 0, //nav盒子的节点信息
				componentWidth: 0, //nav盒子的宽度
				refreStatus: false,
				selectedPaymentMethod: '',
				type: 0,
				swiperh: '100vh',
				swiperheight: '100vh',//削去高度
				height: '190upx',//削去高度
			};
		},
		onLoad() {
			// 禁用苹果浏览器左滑返回
			uni.hideBackHome = true;
		},
		onUnload() {
			// 恢复苹果浏览器左滑返回（当页面销毁时）
			uni.hideBackHome = false;
		},
		computed: {
			style() {
				return `width:${this.navItemWidth}px; left:${this.navItemLeft}px`;
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			toback() {
				uni.switchTab({
					url: "/pages/my/my",
				})
			},
			// 获取dom信息
			init() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.uni-nav').fields({
					rect: true,
					size: true
				}, res => {
					this.parentLeft = res.left;
					this.componentWidth = res.width;
					// var height = res.height + res.bottom;
					this.height = res.height;
					// console.log(res)
				});
				query.select('.swiper').fields({
					rect: true,
					size: true
				}, res => {
					this.swiperheight = res.height - this.height;
					this.swiperh = res.height;
				});
				query.selectAll('.nav-item').fields({
					rect: true,
					size: true
				}, data => {
					data.forEach((item, index) => {
						if (index == 0) {
							this.navItemWidth = item.width;
							this.navItemLeft = item.left;
						}
						this.navInfos.push({
							width: item.width,
							left: item.left
						});
					});
				});
				query.exec();
			},
			// 点击导航切换swiper
			taggleNav(val) {
				this.swiperIndex = val;
			},
			opentype(id) {
				this.type = id;
			},
			// 滚动tabs以及移动下划线
			scrollDom() {
				let info = this.navInfos[this.swiperIndex];
				let offsetLeft = info.left - this.parentLeft;
				let scrollLeft = offsetLeft - (this.componentWidth - info.width) / 2;
				this.scrollToLeft = scrollLeft < 0 ? 0 : scrollLeft;
				this.navItemLeft = this.navInfos[this.swiperIndex].left;
				setTimeout(() => {
					this.navItemWidth = info.width;
				}, 50);
			},
			radioChange(e) {
				this.selectedPaymentMethod = e.detail.value;
			},
			// swiper的index变动
			swiperChange(e) {
				this.swiperIndex = e.detail.current;
				this.scrollDom();
				// this.$emit('currentIndex', this.swiperIndex);
			},
		}
	};
</script>

<style lang="scss">
	.geban {
		height: 120upx;
		color: #F2F2F2;
	}

	.nav-item {
		display: inline-block;
		margin: 0 16upx;
		text-align: center;
		transition: color 0.3s ease;
	}
	.nav-scroll {
		width: 100%;
		// background: #ffffff;
		// height: 100rpx;
		z-index: 999;
		// position: relative;
		position: fixed;
		// top: 80rpx; 
	}
	.nav {
		white-space: nowrap;
		// position: fixed;
		position: relative;
		height: 60upx;
		// z-index: 999;

		// display: flex;
		// justify-content: space-between;
		// align-items: center;
		background-color: #ffffff;
		padding: 20rpx 20rpx;
		
	}

	/* #ifndef APP-NVUE */
	::-webkit-scrollbar {
		display: none;
	}

	/* #endif */

	/* #ifdef H5 */
	// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
	scroll-view ::v-deep ::-webkit-scrollbar {
		display: none;
	}

	/* #endif */
	.tab {
		font-size: 40rpx;
		color: #3D3D3D;
	}

	.nav-item-act {
		color: #1D1D1D;
		font-size: 40rpx;
		font-weight: bold;
	}

	.nav-line {
		position: absolute;
		bottom: 0;
		height: 10upx;
		border-radius: 10upx;
		background-color: #C089FF;
		transition: left 0.3s ease;
	}

	swiper {
		// height: 100vh;
		// overflow: hidden;
		height: calc(100vh - 230upx);
		// height: calc(100vh - 190upx);
	}

	.swiper {

		// position: relative;
		// top: 120rpx;

		// margin-top: 100rpx;
	}

	swiper-item {
		position: relative;
		color: #000;
	}

	.swiper-item {
		overflow-y: scroll;
		// height: 100%;
	}


	.swiper-scroll {
		height: 100%;
	}
	page,
	.page {
		background-color: #F2F2F2;
		height: 100%;
	}
	
	
</style>